<template>
<div id="edit-goods">
    <header class="edit-goods-header">
        <h3>编辑商品 - {{goods_id}}</h3>
    </header>
    <form class="form-goods">
        <my-input
            title='商品名称'
            name='goods-name'
            v-model='goodsName'
        ></my-input>
        <my-input
            title='商品价格'
            name='goods-price'
            v-model='goodsPrice'
        ></my-input>
        <my-input
            title='商品重量'
            name='goods-weight'
            v-model='goodsWeight'
        ></my-input>
    </form>
    <footer class="edit-goods-footer">
        <my-button 
            type='back' 
            link 
            :to="{name: 'goodsList'}"
        >返回</my-button>
        <my-button
            type='save'
            :disabled='!goodsName || !goodsPrice || !goodsWeight'
            @click.native='handleClickSaveGoodsInfo'
        >保存</my-button>
    </footer>
</div>
</template>

<script>
import { 
    searchGoods, 
    editGoods 
} from '../../config/data'
export default {
    name: 'editGoods',
    props: ['goods_id'],
    data() {
        return {
            goodsName: '',
            goodsPrice: '',
            goodsWeight: ''
        }
    },
    created() {
        if(!this.goods_id) {
            this.$router.push({name: 'goodsList'})
            return;
        }
        this.getGoodsData()
    },
    methods: {
        async handleClickSaveGoodsInfo() {
            const goodsObj = {
                goodsName: this.goodsName,
                goodsPrice: this.goodsPrice,
                goodsWeight: this.goodsWeight,
                updTime: Date.now().toString().slice(0, -3)
            }
            let result = await editGoods({
                goodsId: this.goods_id,
                goodsInfo: goodsObj
            })
            if(!result.fsBool) return;
            setTimeout(_ => this.$router.push({name: 'goodsList'}), 60)
        },
        async getGoodsData() {
            let result = await searchGoods({
                goodsInfo: this.goods_id
            })
            let goods = result.data.lists[0]
            this.goodsName = goods.goods_name
            this.goodsPrice = goods.goods_price
            this.goodsWeight = goods.goods_weight
        }
    }
}
</script>

<style scoped>
#edit-goods {
    height: 100%;
}
.edit-goods-header,
.edit-goods-footer {
    height: 50px;
    line-height: 50px;
}
.form-goods {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.edit-goods-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}
.edit-goods-footer :first-of-type {
    margin-right: 12px;
}
</style>